<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>BO Input</title>
  <style>
    * { box-sizing: border-box; }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #2b2b2b 0%, #afafaf 100%);
      color: #fff;
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding-top: 32px; /* 为窗口控制栏留出空间 */
    }

    /* 窗口控制按钮样式 */
    .window-controls-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 32px;
      background: rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 10000;
      -webkit-app-region: drag;
    }
    
    .window-title {
      color: rgba(255, 255, 255, 0.9);
      font-size: 13px;
      font-weight: 500;
      margin-left: 16px;
      letter-spacing: 0.3px;
      -webkit-app-region: drag;
    }
    
    .window-controls {
      display: flex;
      align-items: center;
      gap: 1px;
      margin-right: 8px;
      -webkit-app-region: no-drag;
    }
    
    .control-btn {
        width: 32px;
        height: 24px;
        border: none;
        outline: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-app-region: no-drag;
        white-space: nowrap;
      }
      
      .control-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 1);
        transform: translateY(-0.5px);
      }
      
      .control-btn:active {
        transform: translateY(0);
        background: rgba(255, 255, 255, 0.15);
      }
      
      .minimize-btn:hover {
        background: rgba(255, 193, 7, 0.15);
        color: #ffc107;
      }
      
      .maximize-btn:hover {
        background: rgba(40, 167, 69, 0.15);
        color: #28a745;
      }
      
      .close-btn:hover {
        background: rgba(220, 53, 69, 0.15);
        color: #dc3545;
      }
      
      .control-btn svg {
        display: block;
        width: 12px;
        height: 12px;
        color: inherit;
        fill: currentColor;
        stroke: currentColor;
        pointer-events: none;
        flex-shrink: 0;
      }

    /* 主要内容区域 */
    header { 
      display: flex; 
      align-items: center; 
      justify-content: space-between; 
      padding: 16px 20px; 
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255,255,255,0.05);
      backdrop-filter: blur(8px);
    }
    
    header .title { 
      font-weight: 600; 
      color: #73aadc; 
      font-size: 18px; 
    }
    
    .controls-process { 
      display: flex; 
      gap: 12px; 
    }
    
    .process-btn{
      width: auto;
      background: #5f5f5f; 
    }

    .container { 
      width: 70%; 
      max-width: none; 
      margin: 0 auto; 
      padding: 20px; 
      flex: 1; 
    }
    
    h1 { 
      text-align: center; 
      color: #73aadc; 
      margin: 24px 0 32px; 
      font-size: 2rem; 
      font-weight: 600; 
    }
    
    .main-card { 
      background: #ffffff; 
      border: 1px solid #e9ecef; 
      border-radius: 12px; 
      padding: 32px; 
      box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
      color: #333;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    
    .form-section {
      margin-bottom: 24px;
    }
    
    .form-section h3 {
      margin: 0 0 16px 0;
      color: #495057;
      font-size: 16px;
      font-weight: 600;
    }
    
    .form-row { 
      display: flex; 
      gap: 16px; 
      align-items: center; 
      margin-bottom: 16px; 
    }
    
    .form-row.full-width {
      flex-direction: column;
      align-items: stretch;
    }
    
    label { 
      color: #495057; 
      font-size: 14px; 
      font-weight: 500;
      min-width: 120px;
    }
    
    button { 
      background: #3797ff; 
      border: none; 
      color: white; 
      padding: 12px 20px; 
      border-radius: 8px; 
      cursor: pointer; 
      font-size: 14px; 
      font-weight: 500; 
      transition: all 0.2s ease;
    }
    
    button:hover { 
      background: #0072ec; 
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(55, 151, 255, 0.3);
    }
    
    button.secondary { 
      background: #6c757d; 
    }
    
    button.secondary:hover { 
      background: #5a6268; 
      box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
    }
    
    button.success {
      background: #28a745;
    }
    
    button.success:hover {
      background: #218838;
      box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
    }
    
    button:disabled { 
      background: #a0a4ab; 
      cursor: not-allowed; 
      transform: none;
      box-shadow: none;
    }
    
    input[type="text"], input[type="number"], input[type="password"] { 
      flex: 1; 
      padding: 12px 16px; 
      border-radius: 8px; 
      border: 1px solid #dee2e6; 
      background: #fff; 
      color: #333; 
      outline: none;
      font-size: 14px;
      transition: border-color 0.2s ease;
    }
    
    input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus {
      border-color: #3797ff;
      box-shadow: 0 0 0 3px rgba(55, 151, 255, 0.1);
    }
    
    input[type="text"]::placeholder, input[type="number"]::placeholder, input[type="password"]::placeholder { 
      color: #6c757d; 
    }
    
    .password-input-container {
      position: relative;
      display: flex;
      align-items: center;
    }
    
    .password-input-container input {
      padding-right: 40px;
      width: 100%;
      min-width: 0;
    }
    
    .password-toggle-btn {
      position: absolute;
      right: 8px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      color: #6c757d;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
    
    .password-toggle-btn:hover {
      color: #3797ff;
      background: rgba(55, 151, 255, 0.1);
    }
    
    .password-toggle-btn svg {
      width: 16px;
      height: 16px;
    }
    
    /* 浏览器模式切换样式 */
    .browser-mode-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }
    
    .toggle-switch {
      position: relative;
      display: inline-block;
    }
    
    .toggle-switch input[type="checkbox"] {
      display: none;
    }
    
    .toggle-label {
      display: flex;
      align-items: center;
      cursor: pointer;
      background: #e9ecef;
      border-radius: 20px;
      padding: 4px;
      transition: all 0.3s ease;
      position: relative;
      width: 200px;
      height: 36px;
      border: 2px solid #dee2e6;
    }
    
    .toggle-slider {
      position: absolute;
      top: 4px;
      left: 4px;
      width: 92px;
      height: 26px;
      background: #007bff;
      border-radius: 16px;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .toggle-text {
      display: flex;
      width: 100%;
      position: relative;
      z-index: 1;
    }
    
    .toggle-text span {
      flex: 1;
      text-align: center;
      font-size: 12px;
      font-weight: 500;
      line-height: 26px;
      transition: color 0.3s ease;
    }
    
    .visible-text {
      color: #191b1d;
    }
    
    .hidden-text {
      color: #fff;
    }
    
    /* 当checkbox未选中时（显示浏览器模式） */
    .toggle-switch input[type="checkbox"]:not(:checked) + .toggle-label .toggle-slider {
      transform: translateX(96px);
      background: #28a745;
    }
    
    .toggle-switch input[type="checkbox"]:not(:checked) + .toggle-label .visible-text {
      color: #fff;
    }
    
    .toggle-switch input[type="checkbox"]:not(:checked) + .toggle-label .hidden-text {
      color: #6c757d;
    }
    
    .mode-description {
      font-size: 12px;
      color: #6c757d;
      padding: 4px 8px;
      background: #f8f9fa;
      border-radius: 4px;
      border-left: 3px solid #007bff;
    }
    
    .status-section {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 24px;
    }
    
    .status { 
      font-size: 13px; 
      color: #6c757d; 
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .status-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #6c757d;
    }
    
    .status-indicator.success {
      background: #28a745;
    }
    
    .status-indicator.error {
      background: #dc3545;
    }
    
    .log-section h3 {
      margin: 0 0 12px 0;
      color: #495057;
      font-size: 16px;
      font-weight: 600;
    }
    
    .log { 
      height: 280px; 
      overflow: auto; 
      background: #f8f9fa; 
      border: 1px solid #dee2e6; 
      border-radius: 8px; 
      padding: 16px; 
      white-space: pre-wrap; 
      color: #212529; 
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 13px;
      line-height: 1.4;
    }
    
    .log::-webkit-scrollbar {
      width: 8px;
    }
    
    .log::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }
    
    .log::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4px;
    }
    
    .log::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .container {
        padding: 16px;
      }
      
      .main-card {
        padding: 20px;
      }
      
      .form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      
      label {
        min-width: auto;
      }
      
      .controls {
        flex-direction: column;
        gap: 8px;
      }
    }
  </style>
</head>
<body>
  <!-- 窗口控制栏 -->
  <div class="window-controls-bar">
    <div class="window-title">BO Input - BO发票录入</div>
    <div class="window-controls">
      <button class="control-btn minimize-btn" onclick="minimizeWindow()">
        <svg viewBox="0 0 12 12">
          <rect x="2" y="5.5" width="8" height="1" fill="currentColor"/>
        </svg>
      </button>
      <button class="control-btn maximize-btn" onclick="maximizeWindow()">
        <svg viewBox="0 0 12 12">
          <rect x="2" y="2" width="8" height="8" stroke="currentColor" stroke-width="1" fill="none"/>
        </svg>
      </button>
      <button class="control-btn close-btn" onclick="closeWindow()">
        <svg viewBox="0 0 12 12">
          <path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </button>
    </div>
  </div>

  <!-- 主要内容区域 -->
  <header>
    <div class="title">Back Office Input</div>
    <div class="controls-process">
      <button class='process-btn' id="btn-open">📁 打开Excel</button>
      <button class='process-btn' id="btn-run" class="success" disabled>▶️ 开始执行</button>
      <button class='process-btn' id="btn-stop" class="secondary">⏹️ 停止</button>
    </div>
  </header>
  
  <div class="container">
    <h1>Back Office 发票自动录入</h1>
    
    <div class="main-card">
      <!-- 文件选择区域 -->
      <div class="form-section">
        <h3>📄 文件选择</h3>
        <div class="form-row">
          <label for="excelPath">Excel 文件路径</label>
                <input id="excelPath" type="text" placeholder="请选择要处理的Excel文件" readonly />
        </div>
      </div>

      <!-- 系统配置区域 -->
      <div class="form-section">
        <h3>⚙️ 系统配置</h3>
        <div class="form-row">
          <label for="boAddress">BO 系统地址</label>
          <input id="boAddress" type="text" placeholder="Back Office 系统地址" value="https://cnapp.sgs.net/backoffice/user/login.htm" />
        </div>
        <div class="form-row">
          <label for="defaultTimeout">默认超时时间 (ms)</label>
          <input id="defaultTimeout" type="number" placeholder="默认超时时间" value="6000" min="1000" max="30000" />
          <label for="timeout">操作超时时间 (ms)</label>
          <input id="timeout" type="number" placeholder="操作超时时间" value="500" min="100" max="5000" />
        </div>
        <div class="form-row">
          <label for="username">用户名</label>
          <input id="username" type="text" placeholder="请输入用户名" />
          <label for="password">密码</label>
          <div class="password-input-container">
            <input id="password" type="password" placeholder="请输入密码" />
            <button type="button" class="password-toggle-btn" id="passwordToggle">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
            </button>
          </div>
        </div>
        <div class="form-row">
          <label for="browserMode">浏览器模式</label>
          <div class="browser-mode-container">
            <div class="toggle-switch" id="browserModeToggle">
              <input type="checkbox" id="headlessMode" checked />
              <label for="headlessMode" class="toggle-label">
                <span class="toggle-slider"></span>
                <span class="toggle-text">
                  <span class="hidden-text">🔒 隐藏</span>
                  <span class="visible-text">🖥️ 显示</span>
                </span>
              </label>
            </div>
            <div class="mode-description" id="modeDescription">
              当前模式：后台运行（隐藏浏览器窗口）
            </div>
          </div>
        </div>
      </div>

      <!-- 环境状态区域 -->
      <div class="status-section">
        <div class="status">
          <div class="status-indicator" id="statusIndicator"></div>
          <span id="envStatus">正在检查Python环境状态...</span>
        </div>
      </div>

      <!-- 依赖管理区域 -->
      <div class="form-section">
        <h3>🔧 依赖管理</h3>
        <div class="form-row">
          <button id="btn-install" class='process-btn'>📦 安装依赖</button>
        </div>
      </div>

      <!-- 日志输出区域 -->
      <div class="log-section">
        <h3>📋 执行日志</h3>
        <div class="log" id="log">等待操作...</div>
      </div>
    </div>
  </div>

  <script>
    if (htmlUIAPI) {
        htmlUIAPI.injectWindowControls();
      }
      
      // 添加窗口控制功能
      function minimizeWindow() {
        if (window.electronAPI && window.electronAPI.minimizeWindow) {
          window.electronAPI.minimizeWindow();
        }
      }
      
      function maximizeWindow() {
        if (window.electronAPI && window.electronAPI.toggleMaximize) {
          window.electronAPI.toggleMaximize();
        }
      }
      
      function closeWindow() {
        if (window.electronAPI && window.electronAPI.closeWindow) {
          window.electronAPI.closeWindow();
        }
      }
      
      // 将函数暴露到全局作用域
      window.minimizeWindow = minimizeWindow;
      window.maximizeWindow = maximizeWindow;
      window.closeWindow = closeWindow;

    // 确保在DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 窗口控制函数已经定义在全局作用域中
      
      // 浏览器模式切换功能
      const headlessModeCheckbox = document.getElementById('headlessMode');
      const modeDescription = document.getElementById('modeDescription');
      
      // 初始化描述文本
      updateModeDescription();
      
      // 监听切换事件
      headlessModeCheckbox.addEventListener('change', function() {
        updateModeDescription();
      });
      
      function updateModeDescription() {
        if (headlessModeCheckbox.checked) {
          modeDescription.textContent = '当前模式：后台运行（隐藏浏览器窗口）';
          modeDescription.style.borderLeftColor = '#007bff';
        } else {
          modeDescription.textContent = '当前模式：显示浏览器（可见浏览器窗口）';
          modeDescription.style.borderLeftColor = '#28a745';
        }
      }
      
      // 获取浏览器模式状态的函数
      window.getBrowserMode = function() {
        return {
          headless: headlessModeCheckbox.checked,
          description: modeDescription.textContent
        };
      };
    });
  </script>
  <script src="./BO-Input.js"></script>
</body>
</html>